<template>
  <div class="home">
    <Nav></Nav>
    <div class="content"
         @scroll="scroll()"
         ref="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue'
export default {
  name: 'Home',
  components: {
    Nav
  },
  methods: {
    scroll () {
      let top = this.$refs.content.scrollTop;
      //400  1500
      if (top > 400) {
        if (top > 1000) {
          if (this.$store.state.init) this.$store.commit('outit')
        } else {
          if (!this.$store.state.init) this.$store.commit('init')
        }
      }
    }
  },
  mounted () {
    // this.$refs.content.scrollTop = 1000;
  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  display: flex;
  .nav {
    width: 20%;
  }
  .content {
    width: 80%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 设置滚动条的样式 */
  .content::-webkit-scrollbar {
    width: 12px;
  }
  /* 滚动槽 */
  .content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  .content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }
  .content::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>